<template>
  <el-button @click="preview">点击报表预览</el-button>
  <div style="height: 100%" id="finereport3801_abs_v_echo"></div>
</template>
<script setup>


const reportDesignerId = "fineReport3801_abs_v_main"
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {onMounted, ref} from "vue";
const usePreStore = usePreviewStore();
import {queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";

const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: false,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: false,
};

let spreadSheet;

onMounted(() => {
  spreadSheet = XZReport("#finereport3801_abs_v_echo", option);

})
const preview = () => {
  if (usePreStore.xzReportDesigners.size > 0 && usePreStore.xzReportDesigners.has(reportDesignerId)) {
    let {config, data} = usePreStore.xzReportDesigners.get(reportDesignerId)
    if (data.length > 0) {//有json数据源
        console.log("报表设计器实例{config, data} = sheetDesign.getData(); json数据集表结构和json数据集记录信息都在data:居然有数据,因为有json数据源：", data);
      spreadSheet.update(config, data);
    } else {//没有json数据源，只有外部数据源
        console.log("报表设计器实例{config, data} = sheetDesign.getData(); 居然没有使用json数据集及其记录，data:", data);
        spreadSheet.update(config);
      }
    }
}

const onUpdateData = (datasets, params) => {
  console.log("datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets,params,data));
  })
}
option.onUpdateData = onUpdateData


function onUpdateDatasetList() {
  console.log("onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
    resolve([]);

  })
}
option.onUpdateDatasetList = onUpdateDatasetList


</script>

<style scoped>

</style>
